<template>
  <div class="detail">
    <van-notice-bar
      left-icon="volume-o"
      :scrollable="false"
    >
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item
          v-for="carouselList in carouselLists"
          :key='carouselList.index'
        >
          {{ carouselList.nickName }} {{ carouselList.desc }}
        </van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <div class="detail-swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="url in detail.photo" :key="url.id">
            <img :src="url.url">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="detail-intro">
      <h3>{{detail.title}}</h3>
      <div class="detail-info">
        <span>
          券后￥{{detail.price}}
          <del>原价：{{detail.originPrice}}</del>
        </span>
        <span v-if="detail.hasCoupon">{{detail.couponValue}}</span>
      </div>
      <div class="detail-time">
        活动火热进行中~
        <span>{{ detail.expireDate }}截止</span>
      </div>
      <h2>
        <span>———— 商品图文详情 ————</span>
      </h2>
      <div v-for="url in detail.descContentList" :key="url.index" class="photo">
        <img :src="url.image.url">
      </div>
      <div class="store">
        <img :src="stores.picUrl" alt="">
        <h4>{{ stores.nickname }}</h4>
        <p>{{ stores.shopScoreText }}</p>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" to="/cart" text="购物车" />
      <van-goods-action-icon icon="star-o" text="收藏" color="#ff5000" @click="collection({ detail })"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="addToCart({ detail })"/>
      <van-goods-action-button type="danger" text="立即购买" to="/cart" @click="addToCart({ detail })"/>
    </van-goods-action>
    <div class="gotop" v-show="gotop" @click="toTop">Top</div>
  </div>
</template>

<script>
import {
  mapMutations
} from 'vuex'
export default {
  data () {
    return {
      id: '',
      detail: [],
      carouselLists: [],
      stores: [],
      time: '',
      gotop: false
    }
  },
  created () {
    this.id = this.$route.query.id
    this.$http.getDetail(this.id)
      .then(resp => {
        this.carouselLists = resp.carouselList
        const {
          nickname,
          picUrl,
          shopScoreText
        } = resp.shop
        this.stores = {
          nickname,
          picUrl,
          shopScoreText
        }
        const {
          id,
          couponValue,
          photo,
          price,
          originPrice,
          title,
          descContentList,
          expireDate,
          hasCoupon
        } = resp.detail
        this.detail = {
          id,
          couponValue,
          photo,
          price,
          originPrice,
          title,
          descContentList,
          expireDate,
          hasCoupon
        }
      })
    this.myDate = new Date()
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    ...mapMutations(['addToCart', 'collection']),
    toTop () {
      location.reload()
    },
    handleScroll (e) {
      if (e.target.scrollTop > 300) {
        this.gotop = true
      } else {
        this.gotop = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  line-height: 2;
  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
  &-swipe {
    img {
      width: 100%;
      height: 400px;
    }
  }
  h3 {
    font-size: 14px;
    color: #43240c;
  }
  &-intro {
    padding: 0 10px;
  }
  &-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span:first-child {
      font-size: 18px;
      font-family: "宋体";
      color: #ee0a24;
      del {
        font-size: 14px;
        color: #999;
        padding-left:5px;
      }
    }
    span:last-child {
        font-size: 12px;
        color: #999;
    }
  }
  &-time {
    font-size: 14px;
    height: 30px;
    line-height: 20px;
    color: #ee0a24;
    font-weight: 800;
    span {
      float: right;
      color: black;
      font-weight: 100;
    }
  }
  .store {
    border-top: 1px solid #ddd;
    height: 70px;
    line-height: 30px;
    font-size: 14px;
    img {
      float: left;
      height:100%;
      margin-right: 10px;
    }
  }
  .photo {
    width: 100%;
    img {
      width: 100%;
    }
  }
  h2 {
    text-align: center;
    height: 50px;
    font-size: 14px;
    color: #999;
    line-height: 50px;
    border-top: 1px solid #ddd;
  }
}
.gotop {
  text-align: center;
  position: fixed;
  right: 15px;
  bottom: 100px;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  background: lightskyblue;
  color: white;
}
</style>
